<template>
    <div class="payGifts_free">
        <el-alert v-if="prompt" :closable="false" :title="prompt"></el-alert>
        <div class="payGifts_wrapper">
            <el-button type="primary" @click="createPayGifts">新建支付有礼</el-button>
            <div class="table_filter">
                <el-select v-model="tableParams.status" placeholder="请选择">
                    <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="tableParams.keyword" placeholder="请输入支付有礼名称"></el-input>
                <el-button type="primary" @click="searchTableData">筛选</el-button>
            </div>           
        </div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column prop="date" label="支付有礼名称" width="400"></el-table-column>
            <el-table-column prop="date" label="有效时间" width="350"></el-table-column>
            <el-table-column prop="date" label="权益" width="300"></el-table-column>
            <el-table-column prop="date" label="状态" width="200"></el-table-column>
            <el-table-column prop="date" label="已送份数" width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                    <el-button type="text" size="small">编辑</el-button>                
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data(){
        return {
            prompt: '',
            statusOptions: [
                { value: '', label: '全部状态' },
                { value: 0, label: '未开始' },
                { value: 1, label: '进行中' },
                { value: 2, label: '已结束' },
                { value: 3, label: '已失效' },
            ],
            tableParams: {
                status: '',
                keyword: '',
            },
            tableData: [

            ]
        }
    },
    mounted(){

    },
    methods: {
        createPayGifts(){   //  新建支付有礼
            console.log('新建支付有礼');
            this.$router.push({
                path: '/payGifts/create_payGifts',
                query: {
                    type: 'create'
                }
            })
            
        },
        searchTableData(){  // 表格筛选搜索
            console.log('当前表格筛选参数：',this.tableParams);
        }
    }
}
</script>

<style lang="scss" scoped>
.payGifts_free{
    background-color: #fff;
    padding: 20px;
    margin: 10px 0 0 0;
    .payGifts_wrapper{
        display: flex;
        justify-content: space-between;
        margin: 0 0 15px 0;
        .table_filter{
            display: flex;
            .el-input{
                margin: 0 5px;
            }
        }
    }
}
</style>